<template>
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
<!--      清除浮动-->
      <ul class="clearfix">
        <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>
          <li>
          <img src="@/images/pic.png">
          <h4> PHP 5.0 博客系统实战项目演练</h4>
          <div class="info">
           <span>高级</span>. 1125人在学习
          </div>
        </li>


      </ul>
    </div>
  </div>
</template>
<script setup>

</script>

<style scoped lang="scss">
.box {
      margin-top: 25px;
  .box-hd {
    height: 45px;
    //background-color: pink;
    color: #050505;
    h3 {
      float: left;
      font-size: 20px;
      color: #494949;
      font-weight: 700;
    }
    a {
      float: right;
      font-size: 12px;
      color: #a5a5a5;
      margin-top: 10px;
      margin-right: 30px;
    }
  }
  .box-bd{
    color: #050505;
    //把li的父亲ul修改的足够宽一行能装开所有盒子主不会换行了 (230+15)*5=1225
    ul{
      width: 1225px;

      li{
        float: left;
        width: 228px;
        height: 270px;
        background: #eee;
        margin-right: 15px;
        margin-bottom: 15px;
        img{
          width: 100%;
        }
        h4{
          margin: 20px 20px 20px 25px;
          font-size: 14px;
          font-weight: 400;
        }
        .info{
          margin: 20px 20px 20px 25px;
          font-size: 12px;
          color: #999;
          span{
            color:#ff72cd;
          }
        }
      }
    }

  }
;

}
</style>
